<nz-card>
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">编号</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入编号" [(ngModel)]="searchParams.id" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">项目名称</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入项目名称" [(ngModel)]="searchParams.projectName" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">平台</label>
        <div class="common-search-conrol">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="全部" [(ngModel)]="searchParams.platform" (ngModelChange)="platformSearchChange($event)">
            <nz-option nzLabel="ios" nzValue="1"></nz-option>
            <nz-option nzLabel="Android" nzValue="2"></nz-option>
            <nz-option nzLabel="Windows" nzValue="3"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse || searchParams.platform != 1">
        <label class="common-search-label">应用唯一标识</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入应用唯一标识" [(ngModel)]="searchParams.uId" />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse || searchParams.platform != 1">
        <label class="common-search-label">SUBTITLE</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入SUBTITLE" [(ngModel)]="searchParams.subtitle" />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">分组</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入分组" [(ngModel)]="searchParams.group" />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">最新版本名称</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入最新版本名称" [(ngModel)]="searchParams.lastVersion" />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">最新版本号</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入最新版本号" [(ngModel)]="searchParams.lastVersionid" />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">更新时间</label>
        <div class="common-search-conrol">
          <nz-range-picker [(ngModel)]="updateDates" (ngModelChange)="dateChange($event)"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">强制更新</label>
        <div class="common-search-conrol">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="全部" [(ngModel)]="searchParams.updateFlag">
            <nz-option nzLabel="是" nzValue="1"></nz-option>
            <nz-option nzLabel="否" nzValue="0"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <div class="common-search-conrol">
          <button nz-button nzType="primary" class="m-r-8" (click)="searchData()">查询</button>
          <button nz-button nzType="default" (click)="resetData()">重置</button>
          <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
            {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</nz-card>

<nz-card class="m-t-2">
  <div class="operation-wrap p-b-15">
    <button nz-button nzType="primary" (click)="showModal(0)">新增</button>
  </div>

  <div class="pagination-wrap-position table-wrap">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.tableLoading"
      [nzData]="tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="110px" nzLeft>编号</th>
          <th nzAlign="center" nzWidth="220px">项目名称</th>
          <th nzAlign="center" nzWidth="130px">平台</th>
          <th nzAlign="center" nzWidth="140px">应用唯一标识</th>
          <th nzAlign="center" nzWidth="140px">SUBTITLE</th>
          <th nzAlign="center" nzWidth="100px">LOGO</th>
          <!-- <th nzAlign="center" nzWidth="100px">排序</th> -->
          <th nzAlign="center" nzWidth="120px">分组</th>
          <th nzAlign="center" nzWidth="160px">最新版本名称</th>
          <th nzAlign="center" nzWidth="160px">最新版本号</th>
          <th nzAlign="center" nzWidth="160px">更新时间</th>
          <th nzAlign="center" nzWidth="120px">强制更新</th>
          <th nzAlign="center" nzWidth="120px">应用包</th>
          <th nzAlign="center" nzWidth="120px">应用包大小</th>
          <th nzAlign="center" nzWidth="120px">plist文件</th>
          <th nzAlign="center" nzWidth="150px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <!-- 编号 -->
          <td nzAlign="center" nzLeft>{{ data.id }}</td>
          <!-- 项目名称 -->
          <td nzAlign="center">{{ data.projectName || '-' }}</td>
          <!-- 平台 -->
          <td nzAlign="center">{{ data.platform | platformProStatus }}</td>
          <!-- 应用唯一标识 -->
          <td nzAlign="center">{{ data.uid || '-' }}</td>
          <!-- SUBTITLE -->
          <td nzAlign="center">{{ data.subtitle || '-' }}</td>
          <!-- LOGO -->
          <td nzAlign="center">
            <img
              nz-image
              width="42px"
              height="42px"
              [nzSrc]="data.logo || fallback"
              alt=""
            />
          </td>
          <!-- 排序
          <td nzAlign="center">{{ (data.sort || data.sort == 0) ? data.sort : '-' }}</td> -->
          <!-- 分组 -->
          <td nzAlign="center">{{ data.group || '-' }}</td>
          <!-- 最新版本名称 -->
          <td nzAlign="center">{{ data.lastVersion || '-' }}</td>
          <!-- 最新版本号 -->
          <td nzAlign="center">{{ data.lastVersionid || '-' }}</td>
          <!-- 更新时间 -->
          <td nzAlign="center">{{ data.updateTime || '-' }}</td>
          <!-- 强制更新 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.updateFlag == 0 ? '#ff4d4f' : data.updateFlag == 1 ? '#52c41a' : '#606266'}">
              {{ data.updateFlag == 0 ? '否' : data.updateFlag == 1 ? '是' : '未知' }}
            </span>
          </td>
          <!-- 应用包 -->
          <td nzAlign="center">
            <a nz-button nzType="link" [disabled]="!data.appUrl" [href]="data.appUrl">点击下载</a>
          </td>
          <!-- 应用包大小 -->
          <td nzAlign="center">
            {{ (data.packageSize || data.packageSize == 0) ? calculationPackage(data.packageSize) : '-' }}
          </td>
          <!-- plist文件 -->
          <td nzAlign="center">
            <a nz-button nzType="link" [disabled]="!data.plist" [href]="data.plist">点击下载</a>
          </td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button nz-button nzType="link" (click)="showModal(1, data)">编辑</button>
            <a
              nz-button
              nzType="link"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认删除?"
              (nzOnConfirm)="deleteItem(data)"
            >
              删除
            </a>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 新增 | 编辑 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isModifyVisible"
  [nzTitle]="modalType == 0 ? '新增' : '编辑'"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <!-- S body -->
      <form nz-form nzLayout="vertical" [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label nzRequired>项目名称:</nz-form-label>
          <nz-form-control nzErrorTip="请输入项目名称!">
            <input formControlName="projectName" nz-input placeholder="请输入项目名称" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label>平台:</nz-form-label>
          <nz-form-control>
            <nz-select nzShowSearch nzPlaceHolder="请选择平台" formControlName="platform" (ngModelChange)="platformChange($event)">
              <nz-option nzLabel="ios" nzValue="1"></nz-option>
              <nz-option nzLabel="Andriod" nzValue="2"></nz-option>
              <nz-option nzLabel="Windows" nzValue="3"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item [hidden]="validateForm.value.platform != 1">
          <nz-form-label nzRequired>应用唯一标识:</nz-form-label>
          <nz-form-control nzErrorTip="请输入应用唯一标识!">
            <input formControlName="uId" nz-input placeholder="请输入应用唯一标识" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item [hidden]="validateForm.value.platform != 1">
          <nz-form-label nzRequired>SUBTITLE:</nz-form-label>
          <nz-form-control nzErrorTip="请输入SUBTITLE!">
            <input formControlName="subtitle" nz-input placeholder="请输入SUBTITLE" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label>运行环境:</nz-form-label>
          <nz-form-control>
            <nz-select nzShowSearch nzPlaceHolder="请选择运行环境" formControlName="edition">
              <nz-option nzLabel="不区分" nzValue="0"></nz-option>
              <nz-option nzLabel="开发板" nzValue="1"></nz-option>
              <nz-option nzLabel="生产版" nzValue="2"></nz-option>
              <nz-option nzLabel="预生产版" nzValue="3"></nz-option>
              <nz-option nzLabel="预览版" nzValue="4"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label>LOGO:</nz-form-label>
          <nz-form-control>
            <nz-upload
              class="upload-img-box"
              nzAccept="image/*"
              nzAction=""
              nzListType="picture-card"
              (nzChange)="onModalPreview($event)"
              [nzShowUploadList]="false">
              <div ngDefaultControl formControlName="logo">
                <ng-container *ngIf="!validateForm.value.logo">
                  <i class="upload-icon" nz-icon [nzType]="uploadLoading ? 'loading' : 'plus'"></i>
                  <p class="p-t-8">上传图片</p>
                </ng-container>
                <img *ngIf="validateForm.value.logo" [src]="validateForm.value.logo" style="width: 100%" />
              </div>
            </nz-upload>
            <span *ngIf="validateForm.value.logo" class="delete-img" title="删除" (click)="deleteImg()">
              <i nz-icon nzType="delete" nzTheme="outline"></i>
            </span>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzRequired>分组:</nz-form-label>
          <nz-form-control nzErrorTip="请输入分组!">
            <input formControlName="group" nz-input placeholder="请输入分组" />
          </nz-form-control>
        </nz-form-item>
      </form>
      <!-- E body -->
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="submitForm()">确定</button>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 新增 | 编辑 -->